<template>
	<div class="yh_content foSi14">
		<div class="btn-group_top">
			<el-button type="primary" @click.stop="back" size="small">返回列表</el-button>
		</div>
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px;">
			<div class="block yh_dis" style="margin-top: 10px">
				<div>
					<div class="demonstration yh_qs yh_font13">发卡时间</div>
					<el-date-picker v-model="search.birthday_start" class="date" style="width: 120px;" size="small"
						type="date" placeholder="开始时间" />
					<el-date-picker v-model="search.birthday_end" class="date mar-left5" style="width: 120px;"
						size="small" type="date" placeholder="截至日期" />
				</div>
				<div style="margin-left: 10px">
					<div class="demonstration yh_qs yh_font13">卡类型</div>
					<el-select v-model="search.type" style="width: 100px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in search.typeList" :key="index" :label="item.type_title"
							:value="item.type" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<div class="demonstration yh_qs yh_font13">卡名称</div>
					<el-select v-model="search.cards" style="width: 100px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in search.cardsList" :key="index" :label="item.title"
							:value="item.id" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<div class="demonstration yh_qs yh_font13">卡状态</div>
					<el-select v-model="search.status" style="width: 100px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in search.statusList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<el-button type="primary" class="mar-top20" size="small">搜索</el-button>
				</div>
			</div>
		</div>
		<div class="base-title mar-top25">导出类型及字段</div>
		<div class="item-p1 item-l dis disAl mar-bott5">
			<div class="export-label hei32 dis disAl">导出类型</div>
			<div>导出会员卡</div>
		</div>
		<div class="item-p1 item-l">
			<div class="export-label hei32 mar-top10">导出字段</div>
			<div class="dis disAl flwa">
				<div v-for="(item,index) in list" :key="index" class="export-field__item dis disAl">
					<el-checkbox v-model="item.is_default" :true-label="1" :false-label="0" @change="listChange(index)"
						:disabled="item.is_not_editable === 1" />
					<span class="mar-left10">{{item.title}}</span>
				</div>
			</div>
			<div class="export-btn-group">
				<div class="que coFFF mar cuPo" style="padding: 0 10px;background: #f49352;" @click="importExcel()">导出选中字段</div>
			</div>
		</div>
	</div>
</template>

<script>
  import axios from 'axios'
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
  import {
    searchSousuo,
    importExcelMemberCard, cardList
  } from '@/api/member';
	export default {
		name: 'mCardExport',
		components: {},
		data() {
			return {
				search: {
					birthday_start: '', // 发卡开始时间
					birthday_end: '', // 发卡结束时间
					typeList: [],
					activitisList: [],
					cardsList: [],
					statusList: [],
					type: 0,
					activitis: "-1",
					cards: "0",
					status: "0"
				},
				list: [],
				cunList: [],
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.type = Number(query.type)
			var xuanList = [{
				name: '批量导出会员卡',
				url: '/member/mCardExport',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getSousuoList()
		},
		methods: {

      importExcel(){
        var headers = "";
        this.list.forEach(function(item,index){
          if(item.is_default === 1){
            if(headers === ""){
              headers += item.title;
            }else{
              headers += ","+item.title;
            }
          }
        })
        var data = {
          'start_time': this.search.birthday_start,
          'end_time': this.search.birthday_end,
          'card_type': this.search.type,
          'product_id': this.search.cards,
          'card_state': this.status,
          'headers': headers
        }
        importExcelMemberCard(data).then(response => {
          const {
            data
          } = response
          console.log(1111,data);
          // 创建 Blob 对象
          const blob = new Blob([data], { type: data.type });

          // 判断当前浏览器是否是IE，由于IE是没有download 方法的，需要用msSaveBlob() 或 msSaveOrOpenBlob()
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            // 兼容IE
            window.navigator.msSaveOrOpenBlob(blob, '导出EX')
          } else {
            // 创建 URL 对象
            const url = URL.createObjectURL(blob);

            // 创建链接
            const link = document.createElement('a');
            link.href = url;
            link.download = '导出EX';

            // 模拟点击链接进行下载
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            // 释放 URL 对象
            URL.revokeObjectURL(url);
          }
        }).catch(error => {
          console.log(error);
        })
      },
			listChange(index) {
				if (this.cunList.indexOf(this.list[index]) === -1) {
					this.cunList.push(this.list[index])
				} else {
					this.cunList.splice(this.cunList.indexOf(this.list[index]), 1)
				}
				console.log(this.list)
			},
			back() {
				this.$router.go(-1)
			},
			getSousuoList() {
				var data = {
					"is_super": 0,
					"types": [{
							"type": 0,
							"type_title": "全部"
						},
						{
							"type": 1,
							"type_title": "次数卡"
						},
						{
							"type": 2,
							"type_title": "期限卡"
						},
						{
							"type": 3,
							"type_title": "储值卡"
						}
					],
					"cards": [{
            "id": '0',
            "title": "全部"
          }],
					"status": [
            {
							"id": "0",
							"code": "0",
							"name": "全部"
						},
						{
							"id": "5",
							"name": "正常",
							"code": "5"
						},
						{
							"id": "4",
							"name": "请假",
							"code": "4"
						},
						{
							"id": "6",
							"name": "过期",
							"code": "6"
						},
						{
							"id": "7",
							"name": "未开卡",
							"code": "7"
						},
						{
							"id": "28",
							"name": "挂失",
							"code": "28"
						},
						{
							"id": "29",
							"name": "退卡",
							"code": "29"
						},
						{
							"id": "39",
							"name": "停卡",
							"code": "39"
						}
					],
				}
				this.search.typeList = data.types
				this.search.activitisList = data.activitis
				this.search.cardsList = data.cards
				this.search.statusList = data.status
				this.list = [{
						"title": "姓名",
						"code": "name",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "性别",
						"code": "sex",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "手机号",
						"code": "phone",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "会籍顾问",
						"code": "consultant_name",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "入会时间",
						"code": "m_create_time",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "出生日期",
						"code": "birthday",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "证件类型",
						"code": "credential_type_title",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "证件号",
						"code": "credential_no",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "渠道来源",
						"code": "source_title",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "卡类型",
						"code": "card_type_title",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "卡名称",
						"code": "card_title",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "卡号",
						"code": "card_no",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "卡状态",
						"code": "mcard_status",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 1
					},
					{
						"title": "发卡日期",
						"code": "issue_time",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "开卡日期",
						"code": "activate_time",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "有效期至",
						"code": "deadline",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "余额",
						"code": "residue_amount",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					},
					{
						"title": "收费金额",
						"code": "deal_price",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "会员备注",
						"code": "notes",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "地址",
						"code": "address",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "会员卡备注",
						"code": "mcard_notes",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "初始余额",
						"code": "initial_amount",
						"is_default": 0,
						"is_not_editable": 0,
						"flag": 0
					},
					{
						"title": "剩余资产折算",
						"code": "remaining_assets",
						"is_default": 1,
						"is_not_editable": 1,
						"flag": 1
					}
				]
				var cunList = []
				this.list.forEach(item => {
					if (item.is_default === 1) {
						cunList.push(item)
					}
				})
				this.cunList = cunList
			},
			getList() {
				this.listLoading = true;
				var date = {
					'page': this.listQuery.page,
					'keyword': this.search.name,
					// 'birthday_start': this.search.birthday_start,
					// 'birthday_end': this.search.birthday_end,
					'cards_period_start': this.search.validity_start,
					'cards_period_end': this.search.validity_end,
					// '': this.search.source_id,
					'balance': this.search.balance_id,
					'type': this.search.cardtypeid,
					'types': this.search.typeofid,
					'cardid': this.search.cardnameid,
					'cardstate': this.search.cardstatusid,
					'sort': this.sort
				}
				cardList(date).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
		margin-bottom: 15px;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: rgb(32, 146, 48);
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	.btn-group_top {
		text-align: right;
	}

	.base-title {
		height: 22px;
		font-size: 12px;
		color: #787878;
	}

	.export-label {
		width: 166px;
	}

	.export-field__item {
		width: 130px;
		margin-bottom: 20px;
	}

	.export-btn-group {
		padding: 30px 0;
		background: #f2f2f2;
		text-align: center;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #41c3a8;
		border-color: #41c3a8;
	}

	::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #ffffff;
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__inner:hover {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
		border-color: #fdfeff;
	}

	.date ::v-deep .el-input__inner {
		padding-right: 15px;
	}
</style>
